<template>
  <div>
    <a-list itemLayout="horizontal">
      <a-list-item>
        <a-list-item-meta>
          <template v-slot:title>
            <a>页面导航</a>
          </template>
          <template v-slot:description>
            <span>
              是否显示当前功能的导航路径
            </span>
          </template>
        </a-list-item-meta>
        <template v-slot:actions>
          <a-switch checkedChildren="开启" unCheckedChildren="关闭" :defaultChecked="showNav" @change="onNavChange" />
        </template>
      </a-list-item>
      <a-list-item>
        <a-list-item-meta>
          <template v-slot:title>
            <a>标签栏</a>
          </template>
          <template v-slot:description>
            <span>
              是否显示每个页面头部的标签栏
            </span>
          </template>
        </a-list-item-meta>
        <template v-slot:actions>
          <a-switch checkedChildren="开启" unCheckedChildren="关闭" :defaultChecked="showTab" @change="onTabChange" />
        </template>
      </a-list-item>
      <a-list-item>
        <a-list-item-meta>
          <template v-slot:title>
            <a>主题色</a>
          </template>
          <template v-slot:description>
            <span>
              整体风格配色设置
            </span>
          </template>
        </a-list-item-meta>
        <template v-slot:actions>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item :key="t.color" v-for="t in colorList" @click="handleClick(t)"> {{ t.key }} </a-menu-item>
            </a-menu>
            <a-button type="link"> {{ currKey }}<i class="fa fa-angle-down ml5"/> </a-button>
          </a-dropdown>
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>
<script>
import store from '@/store'
import themeColor from '@/components/SettingDrawer/themeColor.js'
export default {
  data () {
    return {
      showTab: this.$store.state.app.showTab,
      showNav: this.$store.state.app.showNav,
      color: this.$store.state.app.color,
      colorList: [
        { key: '薄暮', color: '#F5222D' },
        { key: '火山', color: '#FA541C' },
        { key: '日暮', color: '#FAAD14' },
        { key: '明青', color: '#13C2C2' },
        { key: '极光绿', color: '#52C41A' },
        { key: '拂晓蓝（默认）', color: '#1890FF' },
        { key: '极客蓝', color: '#2F54EB' },
        { key: '酱紫', color: '#722ED1' }
      ]
    }
  },
  computed: {
    currKey () {
      const arr = this.colorList.filter(t => {
        return t.color === this.color
      })
      return arr.length > 0 ? arr[0].key : '设置主题色'
    }
  },
  methods: {
    onNavChange (checked) {
      store.commit('TOGGLE_NAV', checked)
    },
    onTabChange (checked) {
      store.commit('TOGGLE_TAB', checked)
    },
    handleClick (t) {
      this.currKey = t.key
      this.color = t.color
      store.commit('TOGGLE_COLOR', t.color)
      themeColor.changeColor(t.color).finally(() => {
        this.$message.success('成功切换主题！')
      })
    }
  }
}
</script>
